<template>

  <div class="topBox">
  <div class="L"><a href="index.html">LOGO</a></div>
  <div class="C">
  <div class="saerchbox">
      VueShop商城
  </div>
  </div>
  <div class="R" @click="show=!show"><img src="/assets/images/tr.png"></div>
  </div>

  <!-- 侧边下拉 -->
  <van-popup v-model:show="show" position="right">
  <div class="type">
    <van-sidebar v-model="active" @change="SelectType">
      <van-sidebar-item v-for="item in typelist" :title="item.name"/>
    </van-sidebar>
  </div>
</van-popup>

  <!-- 轮播图 -->
  <div class="clear"></div>
  <div class="aui-m-slider">
    <van-swipe :show-indicators="true" :autoplay="1000">
        <van-swipe-item v-for="(item,index) in Recommend">
            <img :src="item.cover_cdn" />
        </van-swipe-item>
   </van-swipe>
  </div>

  <div class="clear"></div>

  <!-- 商品分类 -->
  <div class="lqgwBox">
  <ul>
    <li v-for="(item,index) in Type">
    <!-- 跳转到path, 用query 传参 -->
      <router-link :to="{path:'/product/product/type',query:{typeid:item.id}}">
          <img :src="item.cover_cdn">
          <p>{{item.name}}</p>
      </router-link>
    </li>

  </ul>
  </div>

  <!-- 新品推荐 -->
  <div class="clear"></div>
  <div class="contitbox">
    <p>新品<span>•</span>推荐</p>
  </div>
  <div class="clear"></div>
    <ul class="proul">
        <li v-for="(item,index) in News">
            <div class="con">
              <router-link :to="{path:'/product/product/info',query:{proid:item.id}}">
                <img :src="item.cover_cdn">
                <p><span>￥</span>{{item.price}}</p>
              </router-link>
            </div>
        </li>
    </ul>

  <div class="clear"></div>
    <div class="adBox">
        <img src="/assets/images/banner.jpg">
    </div>
  <div class="clear"></div>

  <!-- 热销 -->
  <div class="contitbox">
  <p>热销<span>•</span>单品</p>
  </div>
  <div class="clear"></div>
  <ul class="proul_2">
    <li v-for="(item,index) in Hot">
        <div class="con">
          <router-link :to="{path:'/product/product/info',query:{proid:item.id}}">
            <img :src="item.cover_cdn">
            <p><span>￥</span>{{item.price}}</p>
          </router-link>
        </div>
    </li>
    </ul>

  <div class="clear"></div>
  <div class="h54"></div>
  <div class="clear"></div>

<!-- 使用 footer 底部 -->
<menus></menus>
</template>

<script>
// 引入组件
import menus from '@/components/common/menus.vue'
    export default {
      name: 'home',
    //   加载自定义组件
    components:{
        menus
    },
    // 一进来就要显示数据
    created() {
        // 请求前台数据
        this.ProductData()

        this.TypeData()
    },
    data() {
        return {
            // 原本的数据
            Hot:[],
            News:[],
            Recommend:[],
            Type:[],
            ShowType:false,

            show:false,
            typeid:0,//类型id
            active:0,
            typelist:[],//类型列表
      
        };
    },

    // 专门放方法
    methods: {
        // 随便定义一个存放前台数据的方法 ProductData
        async ProductData()
        {
            // 调用接口
            var result=await this.$api.ProductIndex()
            // console.log(result,123);

            // 调用接口后返回来的新数据(覆盖旧数据，覆盖完就可以输出)
            this.Hot=result.data.Hot
            this.News=result.data.News
            this.Recommend=result.data.Recommend
            this.Type=result.data.Type

            // console.log(this.Type);
            
        },
        async TypeData()
        {
          var result =await this.$api.TypeIndex()//拿到分类
          
          this.typelist=result.data
          // console.log(this.typelist);
          
        },
        // 切换类
        SelectType(index)
        {
          this.active=index//下标
          // console.log(this.active);
          this.typeid=this.typelist[index].id//拿到id

          //跳转并传参数
          this.$router.push({
            path:'/product/product/type',
            query:{
              typeid:this.typeid
            }
          })
        

        }
    },
    }
</script>
<style>
    ul.proul li .con{
      padding:0px;
    }
    .topBox .C {
      margin: 0 auto;
      left: 20%;
    }
    .topBox .C .saerchbox{
      font-size: 1.5em;
      line-height: 1.5em;
      background:none;
      left: 0;
      text-align: center;
      color: #000;
    }
    .topBox{
      z-index: 2009;
    }
  
  </style>